<template>

  <div>
    <table class="table" cellspacing="0">
      <thead>
        <tr>
          <th>地区</th>
          <th>新增确诊</th>
          <th>累计确诊</th>
          <th>治愈</th>
          <th>死亡</th>
        </tr>
      </thead>
      <!-- <transition-group enter-active-class="animate__animated animate__bounceIn" tag="tbody">
        <tr :key="item.name" v-for="(item,index) in store.item">
          <td>{{item.name}}</td>
          <td>{{item.today.confirm}}</td>
          <td>{{item.total.confirm}}</td>
          <td>{{item.total.heal}}</td>
          <td>{{item.total.dead}}</td>
        </tr>
      </transition-group > -->
      <tbody>
        <tr :key="item.name" v-for="(item,index) in store.item" @click="choose(item)">
          <td>{{item.name}}</td>
          <td>{{item.today.confirm}}</td>
          <td>{{item.total.confirm}}</td>
          <td>{{item.total.heal}}</td>
          <td>{{item.total.dead}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import { useStore } from '../stores/index'
import 'animate.css'
import {useRouter} from 'vue-router'
import type { Store } from 'pinia';
import type {Today,Total } from '../stores/type'

const store = useStore()
const router = useRouter()

type Item = {
  today: Today;
	total: Total;
	name: string;
	adcode: string;
	date: string;
}

const choose = (item:Item)=>{
  console.log(item.name);
  
  router.push({
    name:'news',
    params:{
      name:item.name
    }
  })
  
}

</script>
<style lang="less" scoped>
.table {
  width: 100%;
  background: blueviolet;
  border: 1px solid #fff;

  tr {
    th {
      padding: 5px;
      white-space: nowrap;
      color: white;
      align-items: center;
      border: 1px solid #fff;
    }

    td {
      padding: 5px 10px;
      width: 100px;
      align-items: center;
      white-space: nowrap;
      color: white;
      border: 1px solid #fff;
    }
  }
}
</style>